﻿<div class="customers view indent">
    <div class="container">
        <header>
            <h3>Customers</h3>
        </header>
        <div class="row">
            <div class="span10">
                <div class="navbar">
                    <div class="navbar-inner toolbar">
                        <ul class="nav">
                          <li data-ng-class="{active: !listViewEnabled}" class="toolbaritem"><a data-ng-click="changeView(ViewEnum.Card)"><i class="icon-th-large"></i> Card View</a></li>
                          <li data-ng-class="{active: listViewEnabled}" class="toolbaritem"><a data-ng-click="changeView(ViewEnum.List)"><i class="icon-align-justify"></i> List View</a></li>
                          <li class="toolbaritem"><a data-ng-click="navigate('/customeredit/0')"><i class="icon-plus"></i> Add Customer</a></li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <span class="navbarText">Filter:</span>&nbsp;&nbsp;<input type="text" data-ng-model="searchText" class="novalidate" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div>
            <div class="row cardContainer show-hide-animation" data-ng-hide="listViewEnabled">
                <div class="span3 card card-animation" 
                    data-ng-repeat="customer in filteredCustomers | orderBy:'lastName'">
                    <button class="btn close cardClose" title="Delete Customer" data-ng-click="deleteCustomer(customer.id)">&times;</button>
                    <div class="cardHeader"><a href="#/customeredit/{{customer.id}}" class="white">{{customer.firstName + ' ' + customer.lastName}} <i class="icon-edit icon-white editIcon"></i></a></div>
                    <div class="cardBody">
                        <div class="clearfix">
                            <div class="pull-left">
                                <a href="#/customeredit/{{customer.id}}" class="white"><img data-ng-src="/Content/Images/{{customer.gender}}.png" class="cardImage" /></a>
                            </div>
                            <div class="pull-left cardBodyRight">
                                <div>{{customer.city}}, {{customer.state.name}}</div>
                                <div><a href="#/customerorders/{{customer.id}}" class="btn-link">{{ customer.orderCount }} Orders</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row gridContainer customersTable show-hide-animation" data-ng-show="listViewEnabled">
                <div class="span10">
                    <table class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th data-ng-click="setOrder('lastName')">Name</th>
                                <th data-ng-click="setOrder('city')">Location</th>
                                <th data-ng-click="setOrder('orderCount')">Orders</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-ng-repeat="customer in filteredCustomers | orderBy:orderby:reverse" class="repeat-animation">
                                <td><a href="#/customeredit/{{customer.id}}"><img data-ng-src="/Content/Images/{{customer.gender}}.png" class="cardImage" alt="Customer Image" /></a></td>
                                <td><a href="#/customeredit/{{customer.id}}">{{customer.firstName + ' ' + customer.lastName}}</a></td>
                                <td>{{customer.city}}, {{customer.state.name}}</td>
                                <td><a href="#/customerorders/{{customer.id}}" class="btn-link">{{ customer.orderCount }} Orders</a></td>
                                <td><button class="btn btn-danger" data-ng-click="deleteCustomer(customer.id)">Delete</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row show-hide-animation" data-ng-show="customers.length == 0">
                <div class="span12">
                    <h4>No customers found</h4>
                </div>
            </div>
            <div class="row show-hide-animation" data-ng-show="customers.length > 0">
                <div class="span12">
                    <div data-pagination="" data-on-select-page="pageChanged(page)" data-total-items="totalRecords" data-page="currentPage" 
                         data-boundary-links="true" class="pagination-small"></div>

                    <h5>Showing {{ filteredCount }} of {{ totalRecords}} total customers</h5>
                </div>
            </div>
            <br />
            <br />
        </div>
    </div>
</div>
